<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #rbg{
            width: 400px;
            height: 100px;
            position: relative;
            margin: 20px 0 20px 300px ;
            font-size: 150%;
            padding: .5em 2em;  
            background: rgb(var(--red), var(--green), var(--blue));    
        }
        .big{          
            margin-left: 100px;
            float: left;
            font-size: 20px;
        }
        :root {
            --red: 44;
            --green: 135;
            --blue: 255;
            }
            
    </style>
</head>
<body>
    <div id="rbg"></div>
<div>
    <p class="big" style="color: red;">R：<input type="range" min="0" max="255" value="44" name="red" id="red"></p>
    <p class="big" style="color: green;">G：<input type="range" min="0" max="255" value="135" name="green" id="green"></p>
    <p class="big" style="color: blue;">B：<input type="range" min="0" max="255" value="255" name="blue" id="blue"></p>
</div>
<script>
    var div = document.getElementById('rbg');
    var input = document.getElementsByTagName('input');
    var red = document.getElementById('red').value;
    var green = document.getElementById('green').value;
    var blue = document.getElementById('blue').value;   
    div.innerHTML="RGB色值：(" + red + "," + green + "," + blue + ")"
    for (var i=0; i < input.length; i++){
        input[i].oninput = function(){
            var red = document.getElementById('red').value;
            var green = document.getElementById('green').value;
            var blue = document.getElementById('blue').value;   
            div.innerHTML="RGB色值：(" + red + "," + green + "," + blue + ")"  
           document.documentElement.style.setProperty('--' + this.name, this.value);            
        }

    }

</script>
</body>
</html>